<template>
  <div class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">奖惩情况</h3>
      </div>
      <div class="box-body">
        <div class=" form-inline dt-bootstrap">
          <div class="row " v-if="isEditable">
            <div class='form-horizontal'>
              <label class="col-md-2 control-label my-label">奖惩时间</label>
              <div class="col-sm-2">
                <MyDatePicker ref='editRewardTime' @timeChanged='time => editReward.time = time' v-bind:date='editReward.time' placeholder="奖惩时间"></MyDatePicker>
              </div>
              <label class="col-md-2 control-label my-label">奖惩内容</label>
              <div class="col-sm-5">
                <input v-model='editReward.content' style="width: 100%;" class="form-control" placeholder="请输入奖惩信息">
              </div>
              <div class="col-md-1">
                <el-button type="success" class="btn btn-success" @click="addrewards">
                  <i class='fa fa-plus-square-o'>添加</i>
                </el-button>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 table-responsive">
              <table class="table table-hover table table-bordered table-striped dataTable">
                <tbody>
                  <tr v-for='(item,key) in this.editRewards' role="row" class="value.cls">
                    <td>
                      <div class="row">
                        <div class="col-md-2">
                          {{ item.time }}
                        </div>
                        <div class="col-md-8">
                          {{ item.content }}
                        </div>
                        <div class="col-md-2" v-if="isEditable">
                          <button @click="deleterewards(index)" class="btn btn-xs">删除</button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MyDatePicker from '../common/MyDatePicker'
export default {
  name: 'RewardsHis',
  props: ['rewards', 'editable'],
  components: {
    MyDatePicker
  },
  data: function() {
    return {
      isEditable:true,
      editReward:{
        time:'',
        content:''
      },
      editRewards: []
    }
  },
  created: function() {
    if (this.editable != null && this.editable != undefined) {
      this.isEditable = this.editable
    }
    if(this.rewards && this.rewards.length >0){
      this.editRewards = this.rewards
    }
  },
  methods: {
    clearData() {
      this.editReward.time = ''
      this.editReward.content = ''
    },
    addrewards() {
      let newReward = {
        time: this.editReward.time,
        content: this.editReward.content
      }
      this.editRewards.push(newReward)
      this.clearData()
    },
    deleterewards(index) {
      this.editRewards.splice(index, 1)
    },
    getData() {
      return this.editRewards
    }
  }
}
</script>
<style scoped>
.edit_tb_input {
  width: 100%;
}
</style>

